<template>
    <div id="check-result-trend">
        <el-container>
            <el-main>
                <el-card class="box-card" :key="statics_flush">
                    <el-row>
                        <el-col :span="8">
                            <el-statistic  title="您当前的个人资产组合市值">
                                <template slot="formatter">
                                    <div style="margin-bottom: 10px;color: #409EFF;">
                                        {{parseFloat(calculated_asset).toFixed(8)}}
                                    </div>
                                </template>
                            </el-statistic>
                        </el-col>
                        <el-col :span="8">
                            <el-statistic  title="本轮收益">
                                <template slot="formatter">
                                    <div style="margin-bottom: 10px;color: #409EFF;">
                                        {{parseFloat(current_profit).toFixed(8)}}
                                    </div>
                                </template>
                            </el-statistic>
                        </el-col>
                        <el-col :span="8">
                            <el-statistic  title="累计收益">
                                <template slot="formatter">
                                    <div style="margin-bottom: 10px;color: #409EFF;">
                                        {{parseFloat(accumulated_profit).toFixed(8)}}
                                    </div>
                                </template>
                            </el-statistic>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <el-table :lazy=true border :data="fund" style="width: 90%;margin-left: 5%;">
                    <el-table-column prop="fundName" label="基金名称" width="240" />
                    <el-table-column prop="fundManager" label="基金经理" width="150" />
                    <el-table-column prop="fundName" label="市场价格走势" width="900" >
                        <template slot-scope="scope">
                            <div :id="scope.row.fundName">
                            </div>
                        </template>      
                    </el-table-column>
                </el-table>
                </el-card>
            </el-main>
        </el-container>
    </div>
  </template>
  
<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts)
  export default {
    name: 'check-result-trend',
    data(){
        return {
            decision_making_index:null,
            calculated_asset:null,
            current_profit:0,
            accumulated_profit:null,
            fund:null,
            statics_flush:0
        }
    },
    methods:{
        calculate_asset(){
            // 算本轮盈亏
            let funds = this.fund
            for(let i=0;i<funds.length;i++){
                let allocated_asset = funds[i].allocationRate[this.decision_making_index] / 100 * this.calculated_asset
                let allocated_count = allocated_asset / funds[i].price[this.decision_making_index -1]
                let cha = funds[i].price[this.decision_making_index] - funds[i].price[this.decision_making_index -1]
                let temp_profit = cha* allocated_count
                this.current_profit +=temp_profit
            }
            this.$global_data.current_profit.push(this.current_profit)
            // 算投资后的所有资产
            this.calculated_asset = this.calculated_asset + this.current_profit
            this.$global_data.calculated_asset = this.calculated_asset
            // 算历史盈亏
            this.accumulated_profit = this.calculated_asset - this.$global_data.init_asset
            this.$global_data.accumulated_profit = this.accumulated_profit
            this.statics_flush ++
        },
        calculate_fund_price(){
            let funds = this.$global_data.fund
            for(let i=0;i<funds.length;i++){
                let random = Math.random();
                let exchange_rate = 0
                if(random> (1- funds[i].riseProbably)){
                    exchange_rate = 1 + parseFloat(funds[i].rise)
                }else{
                    exchange_rate = 1 - parseFloat(funds[i].down)
                }
                funds[i].price.push(funds[i].price[this.decision_making_index-1]*exchange_rate)
            }
        },
        create_fund_trend(){
            setTimeout(()=>{
                for(let i=0;i<this.fund.length;i++){
                    let xAxis = []
                    for(let j=0;j<this.fund[i].price.length;j++){
                        j += 1
                        xAxis.push(j)
                    }
                    Highcharts.chart(this.fund[i].fundName, {
                        chart: {
                            type: 'line',
                            zoomType: 'x',
                            panning: true,
                            panKey: 'shift'
                        },
                        title: {
                            text: this.fund[i].fundName
                        },
                        xAxis: {
                            categories: xAxis,
                            title:{
                                text:'投资轮次'
                            }
                        },
		                yAxis: {
			                title: {
				            text: '价格'
			            }
		                },series: [{
                            name: this.fund[i].fundName,
                            data: this.fund[i].price
                        }]
                        
                    }); 
                }
        },300)
        },
        check_result_trend_data_init(){
            this.decision_making_index = this.$global_data.decision_making_index
            this.calculated_asset = this.$global_data.calculated_asset
            this.accumulated_profit = this.$global_data.accumulated_profit
            this.fund = this.$global_data.fund
            this.$forceUpdate()
        }
    },
    mounted(){
        this.create_fund_trend()
    },
    beforeMount(){
        this.check_result_trend_data_init()
        this.calculate_fund_price()
        this.calculate_asset()
    }
  }
</script>
<style>
#top-compoment-font{
    font-size: 25px;
    color: white;
}
</style>